.artalk-editor-plug-emoticons {
  height: 100%;
  width: 100%;

  .artalk-emoticons-list-wrap {
    .artalk-slim-scrollbar();
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%; // calc(100% - 30px);
    width: 100%;

    .artalk-emoticons-list {
      padding: 5px 10px 35px 10px;

      .artalk-emoticons-item {
        display: inline-block;
        padding: 5px;
        cursor: pointer;
        user-select: none;
        border-radius: 2px;
        font-size: 16px;

        & > img {
          max-height: 60px;
          width: auto;
        }

        &:hover {
          background: @color-bg-grey;
        }
      }
    }
  }

  .artalk-emoticons-types {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: @color-bg-transl;
    height: 30px;
    border-top: 1px solid @color-border;

    & > span {
      user-select: none;
      padding: 0 10px;
      line-height: 30px;
      float: left;
      display: block;
      cursor: pointer;
      font-size: @font-size;

      &:hover,
      &.active {
        background: @color-bg-grey;
      }
    }
  }

}
